<template>
  <div class="home">
    <top-menu :data="data" style="height:30px !important" />
    <div class="header">
      <div class="logo"></div>
      <div class="titleMain">
        <h1>CAL1630连退跑偏分析预测模型</h1>
      </div>
    </div>
    <div class="home-main">
      <el-row class="top h-90%">
        <el-col :span="6">
          <span class="warn">
            <p style="position:absolute;width:80px;top:25px;left:70px;font-size:12px">跑偏模型</p>
            <p
              style="position:absolute;width:180px;height:42px;top:42px;left:70px;font-size:12px;overflow: hidden;"
            >后卷过度异常</p>
            <img :src="imagePath(1)" style="width:350px" />
          </span>
        </el-col>
        <el-col :span="6">
          <span class="warn">
            <p style="position:absolute;width:80px;top:25px;left:454px;font-size:12px">炉温控制</p>
            <p
              style="position:absolute;width:180px;height:42px;top:42px;left:454px;font-size:12px;overflow: hidden;"
            >后卷过度异常</p>
            <img :src="imagePath(2)" style="width:350px" />
          </span>
        </el-col>
        <el-col :span="6">
          <span class="warn">
            <p style="position:absolute;width:80px;top:25px;left:838px;font-size:12px">炉辊打滑</p>
            <p
              style="position:absolute;width:180px;height:42px;top:42px;left:838px;font-size:12px;overflow: hidden;"
            >后卷过度异常</p>
            <img :src="imagePath(3)" style="width:350px" />
          </span>
        </el-col>
        <el-col :span="6">
          <span class="warn">
            <p style="position:absolute;width:80px;top:25px;left:1220px;font-size:12px">平整AI模型</p>
            <p
              style="position:absolute;width:180px;height:42px;top:42px;left:1220px;font-size:12px;overflow: hidden;"
            >正常</p>
            <img :src="imagePath(4)" style="width:350px" />
          </span>
        </el-col>
      </el-row>
      <el-row>
        <!-- <el-col class="top-middle" :span="7">
                <div class="msg-title">跑偏模型报警:</div>
                <div class="information">
                    <el-carousel height="100%" autoplay class="h-100% w-100%" direction="vertical" :interval="8000">
                    <span>&nbsp; 后卷过度异常，模型进行了**调整</span>
                    <el-icon style="color: red !important"><SuccessFilled /></el-icon>
                    </el-carousel>
                </div>


            </el-col>
            <el-col class="top-middle" :span="7">
                <div class="msg-title">炉温控制模型报警:</div>
                <div class="information">
                    <el-carousel height="100%" autoplay class="h-100% w-100%" direction="vertical" :interval="8000">
                    <span>&nbsp; 后卷过度异常，模型进行了**调整</span>
                    <el-icon style="color: red !important"><SuccessFilled /></el-icon>
                    </el-carousel>
                </div>


            </el-col>  
            <el-col class="top-middle" :span="7">
                <div class="msg-title">炉温打滑模型报警:</div>
                <div class="information">
                    <el-carousel height="100%" autoplay class="h-100% w-100%" direction="vertical" :interval="8000">
                    <span>&nbsp; 后卷过度异常，模型进行了**调整的点点滴滴的点点滴顶顶顶顶滴</span>
                    <el-icon style="color: red !important"><SuccessFilled /></el-icon>
                    </el-carousel>
                </div>


        </el-col>-->
      </el-row>
      <el-row class="middle">
        <div class="svg">
          <svg-load :name="deviationTempModel" style="z-index:999"></svg-load>
        </div>
        <div class="inlet_looper semitransp_box">
          <p>出口活套</p>
          <p>{{ numberFormat1(inletLooper / 100) }} %</p>
        </div>
        <div class="inlet_looper_time semitransp_box">
          <p>跑空时间</p>
          <p>{{ inletLooperTime }}</p>
        </div>
        <div class="cpc4_width cpc4_semitransp_box" :class="cpc4WidthAlarm?'is_alarm':''">
          <p>CPC4测宽值</p>
          <p>{{numberFormat1(cpc4Width)}}mm</p>
        </div>
        <div class="middle_looper semitransp_box">
          <p>中间活套</p>
          <p>{{ numberFormat1(middleLooper / 100) }} %</p>
        </div>
        <!-- <div class="entZincPot semitransp_box">
              <p style="color:#FF0000;">入锅温度</p>
              <p style="color:#FF0000;">{{ numberFormat1(entZincPot) }} ℃</p>
            </div>
            <div class="zincPotGa semitransp_box">
              <p style="color: #FFD700">GA锅</p>
              <p style="color: #FFD700">{{ numberFormat1(zincPotGa) }} ℃</p>
            </div>
            <div class="zincPotGi semitransp_box">
              <p style="color: #7FFF00">GI锅</p>
              <p style="color: #7FFF00">{{ numberFormat1(zincPotGi) }} ℃</p>
        </div>-->

        <!-- <div class="AlFeBox">
                <div>
                <span>{{giALFeData.time}}</span>
                </div>
                <div>
                <span>铁：</span>
                <span style="color: #FFD700">{{giALFeData.Fe}}</span>
                </div>
                <div>
                <span>铝：</span>
                <span style="color: #7FFF00">{{giALFeData.Al}}</span>
                </div>
        </div>-->
        <div class="middle_looper_time semitransp_box">
          <p>跑空时间</p>
          <p>{{ middleLooperTime }}</p>
        </div>
        <div class="export_looper semitransp_box">
          <p>入口活套</p>
          <p>{{ numberFormat1(exportLooper / 100) }} %</p>
        </div>
        <div class="export_looper_time semitransp_box">
          <p>冲套时间</p>
          <p>{{ exportLooperTime }}</p>
        </div>
        <!-- <div class="uncoiler_remaining_length_a semitransp_box">
                <p>#1开卷机剩余长度</p>
                <p>{{ numberFormat1(uncoiler_remaining_length_a) }} m</p>
            </div>
            <div class="uncoiler_remaining_length_b semitransp_box">
                <p>#2开卷机剩余长度</p>
                <p>{{ numberFormat1(uncoiler_remaining_length_b) }} m</p>
        </div>-->
        <!-- <div class="coiler_remaining_length_b semitransp_box">
                <p>卷取长度</p>
                <p>{{ numberFormat1(coiler_remaining_length_b) }} m</p>
        </div>-->
        <!-- <div class="yield-strength semitransp_box" style="position:absolute;left: 65.1vw;top: 6vh;padding: 0 .5rem;display:flex">
              <p style="padding-top:2px">屈服强度：</p>
              <p style="padding-top:2px">{{ numberFormat1(yieldStrength) }} </p>
            </div>

            <div class="yield-strength semitransp_box" style="position:absolute;left: 65.1vw;top: 9vh;padding: 0 .5rem;display:flex">
                <p style="padding-top:2px">抗拉强度：</p>
                <p style="padding-top:2px">{{ numberFormat1(yieldPull) }} </p>
        </div>-->

        <!-- <div class="semitransp_box"  style="position:absolute;left: 79vw;top: 17vh;padding: 0 .5rem;display:flex">
                <p>上涂油：</p>
                <p>{{ oilTop * 1 }} </p>
             </div>
            <div class="semitransp_box" style="position:absolute;left:79vw;top: 25vh;padding: 0 .5rem;display:flex">
                <p>下涂油：</p>
                <p>{{ oilBot * 1 }} </p>
        </div>-->

        <div class="uncoiler_remaining_length_a semitransp_box">
          <p>#1卷取长度</p>
          <p>{{ numberFormat1(uncoiler_remaining_length_a) }} m</p>
        </div>
        <div class="uncoiler_remaining_length_b semitransp_box">
          <p>#2卷取长度</p>
          <p>{{ numberFormat1(uncoiler_remaining_length_b) }} m</p>
        </div>
        <div class="coiler_remaining_length_a semitransp_box">
          <p>#1开卷机剩余长度</p>
          <p>{{ numberFormat1(coiler_remaining_length_a) }} m</p>
        </div>
        <div class="coiler_remaining_length_b semitransp_box">
          <p>#2开卷机剩余长度</p>
          <p>{{ numberFormat1(coiler_remaining_length_b) }} m</p>
        </div>

        <div id="middle_speed1" style="margin-left:88px;"></div>
        <div id="middle_speed2" style="margin-left:288px;"></div>
        <!-- <div id="middle_speed3" style="margin-left:168px;"></div> -->
        <div id="middle_speed4" style="margin-left:48px;"></div>
      </el-row>
      <el-row class="foot-lineChart">
        <el-col :span="12">
          <div class="irregular-card"></div>
        </el-col>
        <div class="pillar"></div>
        <el-col :span="12">
          <div class="irregular-card1"></div>
        </el-col>
        <div class="pillar1"></div>
        <!-- <el-col :span="3">
                  <div class="irregular-card2"></div>
        </el-col>-->
        <div class="pillar2"></div>
        <div class="pillar3"></div>
        <div class="pillar4"></div>
        <div class="pillar5"></div>
        <!-- <el-col :span="3">
                  <div class="irregular-card3"></div>
        </el-col>-->
      </el-row>
      <el-row class="foot">
        <el-col>
          <new-coil-card title="实时钢卷信息" class="common_table">
            <el-table
              :data="footTable"
              style="width: 100%;border:1px solid"
              :header-cell-style="{ background: '#2f59af', color: '#fff',fontSize:'10px',border: 'none' }"
              :cell-style="{fontSize:'10px'}"
              max-height="148px"
            >
              <el-table-column prop="序号" label :width="columnWidth(18)" />
              <el-table-column prop="卷号" label="卷号" :width="columnWidth(18)" />
              <el-table-column prop="钢种" label="钢牌号" :width="columnWidth(18)" />
              <el-table-column prop="宽度" label="厚度(mm)" :width="columnWidth(18)" />
              <el-table-column prop="厚度" label="宽度(mm)" :width="columnWidth(18)" />
              <el-table-column prop="命中率" label="跑偏概率(%)" :width="columnWidth(18)" />
              <el-table-column prop="命中率" label="跑偏情况" :width="columnWidth(18)" />
              <el-table-column prop="命中率" label="跑偏位置" :width="columnWidth(18)" />
              <el-table-column prop="命中率" label="严重程度" :width="columnWidth(18)" />
              <el-table-column prop="命中率" label="楔形大于凸度米数(m)" :width="columnWidth(18)" />
              <el-table-column prop="命中率" label="凸度命中率(%)" :width="columnWidth(18)" />
              <el-table-column prop="命中率" label="楔形命中率(%)" :width="columnWidth(16)" />
              <el-table-column prop="命中率" label="板形" :width="columnWidth(16)" />
              <el-table-column prop="命中率" label="头部板形" :width="columnWidth(16)" />
              <el-table-column prop="命中率" label="全长板形" :width="columnWidth(16)" />
              <el-table-column prop="命中率" label="尾部板形" />
            </el-table>
          </new-coil-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { onMounted, ref } from "vue";
import { refreshSVG, initialSVG, refreshGraphical } from "/@/common/refreshSVG";
import BadInformation from "/@/views/common/FulllineTrack/BadInformation.vue";
import NewCoilCard from "/@/components/NewCoilCard/NewCoilCard.vue";
import TopMenu from "/@/components/TopMenu/TopMenu.vue";
import * as echarts from "echarts";
import { rollingSimulationApi } from "/@/api/RollingSimulation/index";
import { weldMachineState } from "/@/views/common/FulllineTrack/full.line.track.status";
const deviationTempModel = "CAL1630";
const imagePath = (rowIndex: number) => {
  const name = "warn.png";
  const normal = "normal.png";
  if (rowIndex === 4) {
    return `/src/assets/images/${normal}`;
  } else {
    return `/src/assets/images/${name}`;
  }
};
//入口段运行速度
const entSpeed = ref<number>();
//光整段速度
const spmSpeed = ref<number>();
//出口段速度
const extSpeed = ref<number>();
//工艺段速度
const lineSpeed = ref<number>();
const inletLooper = ref<number>(0);
const middleLooper = ref<number>(0);
const entZincPot = ref<number>(0);
const zincPotGa = ref<number>(0);
const zincPotGi = ref<number>(0);
const exportLooper = ref<number>(0);
const inletLooperTime = ref<string>("0");
const middleLooperTime = ref<string>("0");
const exportLooperTime = ref<string>("0");
const cpc4Width = ref<number>(0);
const cpc4WidthAlarm = ref<boolean>(false);
const giALFeData = ref<any>({});
const uncoiler_remaining_length_a = ref<number>(0);
const uncoiler_remaining_length_b = ref<number>(0);
const coiler_remaining_length_a = ref<number>(0);
const coiler_remaining_length_b = ref<number>(0);
const oilTop = ref<number>(0);
const oilBot = ref<number>(0);
const trackData = ref({});
let interval: any = null;
const technologicalName = "CAL1630";
let tr: any = null;
let por: any = null;
let ti: any = null;
const data = ref([
  {
    name: "计划卷跑偏预测页面",
    url: "/deviationanalysis/PlanRollDeviationPrediction"
  },
  {
    name: "实际卷跑偏预测页面",
    url: "/deviationanalysis/ActualPerformanceRollDeviation"
  },
  {
    name: "纠偏设备精度诊断",
    url: "/deviationanalysis/AccuracyDiagnosisOfCorrectionEquipment"
  },
  {
    name: "跑偏分档统计",
    url: "/deviationanalysis/DeviationClassificatioStatistics"
  },
  { name: "酸轧板形标准卷", url: "/deviationanalysis/AcidRolledStandardCoil" }
]);

const numberFormat1 = (number: any) => {
  return number == undefined ? "0" : Number(parseFloat(number).toFixed(0));
};
interface Zone {
    distance: string;
    entId: string;
    header: string;
    ti: string;
    wplen: string;
}
const SpeedBaseOption: any = {
  middle_speed1: {
    max: 500,
    segmentation1: 80,
    segmentation2: 300
  },
  middle_speed2: {
    max: 500,
    segmentation1: 120,
    segmentation2: 300
  },
  middle_speed3: {
    max: 500,
    segmentation1: 80,
    segmentation2: 300
  },
  middle_speed4: {
    max: 300,
    segmentation1: 80,
    segmentation2: 180
  }
};
onBeforeMount(() => {
  interval = setInterval(() => {
    getZoneTrk()
    getHour()
  }, 2000);
});
onMounted(() => {
  initScoreChart("middle_speed1", entSpeed.value || 0);
  initScoreChart("middle_speed2", spmSpeed.value || 0);
  //initScoreChart("middle_speed3", extSpeed.value || 0)
  initScoreChart("middle_speed4", lineSpeed.value || 0);
});

const getZoneTrk = async () => {
  let param = {
    name: "CAL1630_zonetrk"
  };
  rollingSimulationApi.rest(param).then(res => {
    let zones = res.data.zoneno;
    weldMachineState(`${technologicalName}-welder`, res.data.weld);
    inletLooper.value = res.data["loop"][0];
    middleLooper.value = res.data["loop"][1];
    exportLooper.value = res.data["loop"][2];
    let trKey = `${technologicalName}-ZONE_tr${res.data.tr}`;
    let trpathKey = trKey + "_path";
    let porKey = `${technologicalName}-ZONE_por${res.data.por}`;
    let porpathKey = porKey + "_path";
    var arr = Object.keys(zones);
    /**开卷机和卷取机 */
    if (tr === null || tr !== res.data.tr) {
      tr = res.data.tr;
      refreshSVG(zones[arr.length - 1].ti % 10, trpathKey);
      refreshGraphical(zones[arr.length - 1].ti % 10, trKey);
      initialSVG(technologicalName, "tr", res.data.tr);
    }
    if (por === null || por !== res.data.por) {
      por = res.data.por;
      if (res.data.por === 0) {
        initialSVG(technologicalName, "por", "1");
        initialSVG(technologicalName, "por", "2");
      }
    }
    if (ti === null || ti !== zones[0].ti) {
      ti = zones[0].ti;
      refreshSVG(zones[0].ti % 10, porpathKey);
      refreshGraphical(zones[0].ti % 10, porKey);
      initialSVG(technologicalName, "por", res.data.por);
    }
    for (let i in zones) {
      let pathkey = `${technologicalName}-ZONE${i}`;
      refreshSVG(zones[i].ti % 10, pathkey);
    }
    // let zoneArray = Object.values(zones as Zone[]);
    // let lastProdCoilId = zones[zoneArray.length - 1].entId;
    // let curPorCoilId = Object.values(zones as Zone[]).find(
    //   (obj: Zone) => obj.entId !== "ENTIDBOOK"
    // )?.entId;
    // if (curTrCoilId.value != lastProdCoilId || realCoilId.value != curPorCoilId) {
    //     curTrCoilId.value = lastProdCoilId;
    //     realCoilId.value = curPorCoilId;
    //     coilIds.value = SearchForCoidId(zones);
    //     getPidMesInfo(coilIds.value.coilIds);
    //     refreshCoilData(res);

    // }
    // const unCoiler = por == '1' ? res.por2CoilNo : res.por1CoilNo;
    // if (lastNewThickCoilId.value != unCoiler){
    //   diffThickCoilId.value = unCoiler;
    //   lastNewThickCoilId.value = unCoiler;
    //   getSinglePdiMsg(unCoiler);
    //   getThicknessDifference(diffThickCoilId.value);
    // }
    // const nowUnCoilMap = {'1':res.por1CoilNo,'2':res.por2CoilNo}
    // if (JSON.stringify(nowUnCoilMap) !== JSON.stringify(unCoilMap.value)) {
    //     unCoilMap.value = nowUnCoilMap;
    //     refreshCoilData(res);
    // }
    // const cpc4EntId = zones[18].entId
    // if (cpc4EntId != zone18EntId.value){
    //   zone18EntId.value = cpc4EntId;
    //   request.post("/mes/pdiData", { coilIds: [cpc4EntId] }).then((result: any) => {
    //     if (result[0]){
    //       zone18SetWidth.value = result[0]['ORDER_WIDTH'];
    //       timeArray.value=[];
    //       actCpcArray.value=[];
    //       setCpc.value = zone18SetWidth.value + 28;
    //     }
    //   })
    // }
  });
};

const getHour = async () => {
  let param = {
    name: "CAL1630_hour"
  };
  rollingSimulationApi.rest(param).then(res => {
    trackData.value.speed = res.data.speed
    trackData.value.realTV = res.data.hour

  })
    
}

// 初始化仪表盘
const initScoreChart = (chartId: string, value: number) => {
  // let value = 999.0; // 值，0~1之间
  let speedChart = echarts.getInstanceByDom(
    document.getElementById(chartId) as HTMLElement
  );
  if (speedChart === undefined)
    speedChart = echarts.init(document.getElementById(chartId) as HTMLElement);
  const baseOption = SpeedBaseOption[chartId];
  let option = {
    series: [
      {
        type: "gauge",
        center: ["50%", "50%"],
        radius: "80%",
        startAngle: 225,
        endAngle: -45,
        max: baseOption.max,
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: 7,
            color: [
              [
                1,
                new echarts.graphic.LinearGradient(0, 1, 0.9, 1, [
                  {
                    offset: 0,
                    color: "#D64444"
                  },
                  {
                    offset: 0.2,
                    color: "#D86E6D"
                  },
                  {
                    offset: 0.5,
                    color: "#F1F3F4"
                  },
                  {
                    offset: 0.65,
                    color: "#F1F3F4"
                  },
                  {
                    offset: 0.8,
                    color: "#79ACF6"
                  },
                  {
                    offset: 1,
                    color: "#1976FD"
                  }
                ])
              ]
            ]
          }
        },
        pointer: {
          // icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: "90%",
          width: 2,
          // offsetCenter: [0, '-60%'],
          // itemStyle: {
          //     color: 'FFFFFF'
          // }
          // shadowColor : '#000',
          color: "FFFFFF"
        },
        axisTick: {
          distance: -14,
          length: 2,
          lineStyle: {
            color: "#4B83F7",
            width: 2
          }
        },
        splitLine: {
          distance: -16,
          length: 6,
          lineStyle: {
            color: "#4B83F7",
            width: 2
          }
        },
        axisLabel: {
          color: "#FFF",
          fontSize: 14,
          distance: -30,
          rotate: "tangential",
          formatter: function(value: any) {
            if (value === 0) {
              return "";
            } else if (value === baseOption.segmentation1) {
              return "";
            } else if (value === baseOption.segmentation2) {
              return "";
            } else if (value === baseOption.max) {
              return "";
            }
            return "";
          }
        },
        title: {
          offsetCenter: [0, "70%"],
          fontSize: 12,
          color: "#FFF"
        },
        detail: {
          fontSize: 18,
          offsetCenter: [0, "30%"],
          valueAnimation: true,
          formatter: function(value: any) {
            return `${value}`;
          },
          color: "#FFF"
        },
        data: [
          {
            value: value,
            name: "mpm"
          }
        ]
      }
    ]
  };
  speedChart.setOption(option);
};
const footTable = ref([
  {
    序号: "POR_ID1",
    卷号: "L19901001001",
    钢种: "SPEC-H",
    宽度: "1099",
    厚度: "0.199",
    命中率: "99%"
  },
  {
    序号: "POR_ID2",
    卷号: "L19901001001",
    钢种: "SPEC-H",
    宽度: "1099",
    厚度: "0.199",
    命中率: "99%"
  },
  {
    序号: "POR_ID3",
    卷号: "L19901001001",
    钢种: "SPEC-H",
    宽度: "1099",
    厚度: "0.199",
    命中率: "99%"
  },
  {
    序号: "POR_ID4",
    卷号: "L19901001001",
    钢种: "SPEC-H",
    宽度: "1099",
    厚度: "0.199",
    命中率: "99%"
  },
  {
    序号: "POR_ID5",
    卷号: "L19901001001",
    钢种: "SPEC-H",
    宽度: "1099",
    厚度: "0.199",
    命中率: "99%"
  },
  {
    序号: "POR_ID6",
    卷号: "L19901001001",
    钢种: "SPEC-H",
    宽度: "1099",
    厚度: "0.199",
    命中率: "99%"
  },
  {
    序号: "POR_ID7",
    卷号: "L19901001001",
    钢种: "SPEC-H",
    宽度: "1099",
    厚度: "0.199",
    命中率: "99%"
  },
  {
    序号: "POR_ID8",
    卷号: "L19901001001",
    钢种: "SPEC-H",
    宽度: "1099",
    厚度: "0.199",
    命中率: "99%"
  },
  {
    序号: "POR_ID9",
    卷号: "L19901001001",
    钢种: "SPEC-H",
    宽度: "1099",
    厚度: "0.199",
    命中率: "99%"
  }
]);
const columnWidth = (percent: number) => {
  const tableWidth = 500; // 根据实际父容器宽度设置
  return (tableWidth * percent) / 100 + "px";
};
</script>
<style scoped lang="less">
.home {
  width: 100vw;
  background: url(/@/assets/images/home/body-bg.jpg) no-repeat;

  .home-main {
    height: 100%;

    .top {
      width: 100%;
    }

    .middle {
      width: 100%;

      .svg {
        width: 100%;
        height: 100%;

        svg {
          width: 100%;
        }
      }
    }

    .footer {
      width: 100%;
      height: 240px;
    }
  }
}

.header {
  height: 10vh;
  background-image: url(/src/assets/img/head-bg.png);
  background-size: 100% 100%;
}
.warn {
  color: #fff;
  width: 30vw;
  height: 3.5vh;
  padding-left: 3vw;
}

.top-middle {
  display: flex;
  width: 48vw;
  margin-left: 1%;
  margin-top: 5px;

  :deep(.el-table-column) {
    &:nth-child(1) {
      width: 20% !important;
    }
    &:nth-child(n + 2) {
      width: 16% !important;
    }
  }
}
.msg-title {
  background-image: -webkit-linear-gradient(left, #0072ff, #00eaff, #01aaff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 2vh;
  font-weight: bolder;
  width: 11vw;
  padding-top: 8px;
  padding-left: 1.8vw;
}
.information {
  color: #fff;
  width: 20vw;
  height: 4vh;
  border: 2px solid #3981d9;
  border-radius: 5px;
  padding-top: 3px;
  overflow: auto;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}
.information span {
  display: inline-block;
  /*inline样式不能使用动画*/
  animation: scroll 10s linear infinite; /*滚动动画*/
}

@keyframes scroll {
  from {
    transform: translateX(150px); /*div多宽就写多宽*/
  }

  to {
    transform: translateX(-100%);
  }
}
.middle {
  height: 30vh;
  width: 100%;
}

.svg {
  margin-top: 4.5vh;
  height: 100%;
  width: 100%;
}

.svg svg {
  height: 100%;
  width: 100%;
}
.bad_information {
  position: absolute;
  width: 17vw;
  height: 12vh;
  left: 82.5vw;
  top: -5.5vh;
  z-index: 9999;
}
.inlet_looper {
  position: absolute;
  left: 17.9vw;
  top: 8.5vh;
  width: 4vw;
  font-size: 8px;
}
.inlet_looper_time {
  position: absolute;
  left: 17.9vw;
  top: 4vh;
  width: 4vw;
  font-size: 8px;
  line-height: 14px;
}
p {
  margin-bottom: 0;
}

/** >looper */
.semitransp_box {
  border-radius: 4px;
  background: #063e90;
  width: fit-content;
  font-weight: 600;
  text-align: center;
  align-content: center;
  color: #fff;
  font-size: 8px;
}
.cpc4_semitransp_box {
  border-radius: 4px;
  background: red;
  width: fit-content;
  font-weight: 600;
  text-align: center;
  align-content: center;
  color: #fff;
  font-size: 8px;
}

.cpc4_width {
  position: absolute;
  left: 77vw;
  top: 34vh;
  width: 7vw;
  font-size: 8px;
}

.middle_looper {
  position: absolute;
  left: 31.6vw;
  top: 10.5vh;
  width: 3.5vw;
  font-size: 8px;
}
.entZincPot {
  position: absolute;
  left: 59.5vw;
  top: 28vh;
  width: 4.5vw;
  font-size: 8px;
}

.zincPotGa {
  position: absolute;
  left: 64.5vw;
  top: 26.5vh;
  width: 5vw;
  font-size: 8px;
}

.zincPotGi {
  position: absolute;
  left: 64.5vw;
  top: 29.5vh;
  width: 5vw;
  font-size: 8px;
}

.AlFeBox {
  background-color: #063e90;
  border-radius: 10px;
  color: white;
  position: absolute;
  left: 65.1vw;
  top: 12vh;
  padding: 0 0.3rem;
  font-size: 8px;
}

.middle_looper_time {
  position: absolute;
  left: 31.6vw;
  top: 7.5vh;
  width: 3.5vw;
  font-size: 8px;
}

.export_looper {
  position: absolute;
  left: 72vw;
  top: 9.5vh;
  width: 3.5vw;
  font-size: 8px;
}

.export_looper_time {
  position: absolute;
  left: 72vw;
  top: 6.5vh;
  width: 3.5vw;
  font-size: 8px;
}

.uncoiler_remaining_length_a {
  position: absolute;
  left: 6.5vw;
  top: 2vh;
  padding-left: 0.5vw;
  text-align: left;
  width: 4vw;
  font-size: 8px;
}

.uncoiler_remaining_length_b {
  position: absolute;
  left: 6.5vw;
  top: 5vh;
  padding-left: 0.5vw;
  text-align: left;
  width: 4vw;
  font-size: 8px;
}

.coiler_remaining_length_a {
  position: absolute;
  left: 88vw;
  top: 17vh;
  padding-left: 0.5vw;
  text-align: left;
  width: 6vw;
  font-size: 8px;
}

.coiler_remaining_length_b {
  position: absolute;
  left: 88vw;
  top: 20vh;
  padding-left: 0.5vw;
  text-align: left;
  width: 6vw;
  font-size: 8px;
}

.yield-strength {
  padding: 0 1rem;
  position: absolute;
  left: 64vw;
  top: 8vh;
  font-size: 8px;
  height: 14px;
  align-content: center;
}

.statistics_info {
  position: absolute;
  left: 80vw;
  top: 8.3vh;
  /* background-color: red; */
  z-index: 900;
  width: 26%;
  height: 27%;
}

/**>middle_monitor */
.middle_monitor {
  width: 35vw;
  height: 9vh;
  position: absolute;
  left: 17.5vw;
  top: -3vh;
  /* background-color: red; */
  z-index: 888;
  border: #3981d9;
  border-style: solid;
  border-width: 2px;
}

/** >echart */
#middle_speed1 {
  position: absolute;
  left: -8vw;
  top: 7vh;
  /* background-color: red; */
  z-index: 889;
  width: 30%;
  height: 35%;
}

#middle_speed2 {
  position: absolute;
  left: 47vw;
  top: 7vh;
  /* background-color: red; */
  z-index: 890;
  width: 30%;
  height: 35%;
}

#middle_speed3 {
  position: absolute;
  left: 69vw;
  top: 7vh;
  /* background-color: red; */
  z-index: 891;
  width: 30%;
  height: 35%;
}

#middle_speed4 {
  position: absolute;
  left: 6.5vw;
  top: 7vh;
  /* background-color: red; */
  z-index: 892;
  width: 30%;
  height: 35%;
}

.foot-lineChart {
  height: 22vh;
  width: 100%;
  margin-top: 1%;
}

.common_table .el-table {
  --el-table-row-hover-bg-color: unset;
  flex: 1; /* 填充剩余空间 */
  display: flex;
  flex-direction: column;
}

:deep(.common_table .el-table__row:nth-child(odd)) {
  background-color: #223671;
}

::v-deep .el-table,
.el-table__expanded-cell {
  // margin-left: 5px !important;
  background-color: transparent !important;
}
::v-deep .el-table tr {
  background-color: transparent !important;
}

::v-deep .el-table tbody {
  background-color: transparent !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td,
::v-deep .el-table .cell {
  background-color: transparent !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border: none !important;
}

::v-deep .el-table--enable-row-transition .el-table__body td {
  padding-top: 4px;
  padding-bottom: 4px;
}

:deep(.el-table tr) {
  background-color: #162556;
}
:deep(.el-table__inner-wrapper::before) {
  background-color: #173d91;
}

:deep(.el-table .cell) {
  line-height: 10px;
}

.irregular-card {
  position: relative;
  width: 100%;
  height: 110px;
  margin-top: 35px;
  background-image: -webkit-linear-gradient(left, #016b9b, #03dafb);
  // background-image: linear-gradient(135deg, #ff7c7c, #ffeb3b, #26c6da, #7e57c2);
  //点的位置1 2 4 6 8 10 9 7 5 3
  clip-path: polygon(
    0% 20%,
    0% 80%,
    25% 100%,
    50% 80%,
    75% 80%,
    100% 80%,
    100% 20%,
    75% 20%,
    50% 20%,
    25% 40%
  );
  animation: flow 1s ease infinite;
  z-index: 1;
}

@keyframes flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.pillar {
  position: absolute;
  top: 58px;
  right: 1232px; /* 根据需要调整位置 */
  width: 10px; /* 柱子的宽度 */
  height: 105px; /* 柱子的高度 */
  background-image: url(/src/assets/images/pillar.png);
}

.pillar1 {
  position: absolute;
  top: 40px;
  right: 1061px; /* 根据需要调整位置 */
  width: 10px; /* 柱子的宽度 */
  height: 105px; /* 柱子的高度 */
  background-image: url(/src/assets/images/pillar.png);
}

.pillar2 {
  position: absolute;
  top: 40px;
  right: 881px; /* 根据需要调整位置 */
  width: 10px; /* 柱子的宽度 */
  height: 105px; /* 柱子的高度 */
  background-image: url(/src/assets/images/pillar.png);
}

.pillar3 {
  position: absolute;
  top: 40px;
  right: 526px; /* 根据需要调整位置 */
  width: 10px; /* 柱子的宽度 */
  height: 105px; /* 柱子的高度 */
  background-image: url(/src/assets/images/pillar.png);
}

.pillar4 {
  position: absolute;
  top: 40px;
  right: 341px; /* 根据需要调整位置 */
  width: 10px; /* 柱子的宽度 */
  height: 105px; /* 柱子的高度 */
  background-image: url(/src/assets/images/pillar.png);
}

.pillar5 {
  position: absolute;
  top: 40px;
  right: 174px; /* 根据需要调整位置 */
  width: 10px; /* 柱子的宽度 */
  height: 105px; /* 柱子的高度 */
  background-image: url(/src/assets/images/pillar.png);
}

.irregular-card1 {
  position: relative;
  width: 100%;
  height: 110px;
  margin-top: 35px;
  background-image: -webkit-linear-gradient(left, #fcc68f, #fe7b12);
  //点的位置1 2 4 6 8 10 9 7 5 3
  clip-path: polygon(
    0% 20%,
    0% 80%,
    25% 80%,
    50% 80%,
    75% 80%,
    100% 80%,
    100% 20%,
    75% 20%,
    50% 20%,
    25% 20%
  );
  z-index: 1;
}
</style>
